import * as Cesium from 'cesium'

// 生成 billboard 自定义文字说明
export const drawBillboardText = (viewer, options = {}) => {
  /*
    1. 使用说明
      参数1: viewer 视图容器
      参数2：options  配置项
      let popInfo = drawBillboardText(this.viewer, options)
      setTimeout(() => {
        popInfo.clear()
      }, 2000)
      返回一个对象，对象上挂载了实例方法，通过调用clear 清除
    2. 参数说明：
      viewer  map视图容器
      options ：
        1. id  billboard自定义的文字id，最好唯一
        2. text  自定义弹出文字框的文字
        3. point  坐标点，[] 经纬度
        4. offsetTop 向上偏移量  一般传入图片的高度，文字显示在图片上方  默认值：100  单位：像素
  */
  const { id = 'popInfo', text = '', point = [], offsetTop = 100, defaultCssText = '' } = options

  const scene = viewer.scene
  const cartesianPos = Cesium.Cartesian3.fromDegrees(point[0], point[1])
  const infoHtml = `<div id="${id}"><span>${text || ''}</span></div>`
  const mapContainer = document.getElementById('cesiumContainer')
  mapContainer.insertAdjacentHTML('afterend', infoHtml)
  let info = document.getElementById(id)
  // const defaultCssText = ` position: absolute;
  //     z-index: 9;
  //     display: block;
  //     position: absolute;
  //     min-width: 100px;
  //     max-width: 200px;
  //     height: auto;
  //     padding: 10px;
  //     background-color: rgb(0, 12, 13);
  //     border: 2px solid rgb(0, 104, 136);
  //     border-radius: 6px;
  //     font-size: 14px;
  //     color: #6BEBED;
  //     word-break: break-all;
  //     text-align: center;`
  info.style.cssText = defaultCssText
  // 球面转动后 UI跟随物体处理
  scene.postRender.addEventListener(function (percentage) {
    // 转换到屏幕坐标
    let x; let y
    if (cartesianPos && info.style.display === 'block') {
      let winpos = scene.cartesianToCanvasCoordinates(cartesianPos)
      if (winpos) {
        x = (winpos.x - info.offsetWidth / 2).toFixed(0) + 'px'
        y = (winpos.y - offsetTop / 1.5).toFixed(0) + 'px'
        info.style.left = x
        info.style.top = y
      }
    }
  })

  function clear () {
    if (info) {
      info.parentNode.removeChild(info)
    }
  }

  return {
    clear
  }
}
